canvas是HTML5中新增的画布，更多请关注红联其它相关文章！ ，不能保证在执行drawImage时读取Image对象的图像， 128， script type=text/javascriptfunction draw() {var canvas = document.getElementById(SimpleCanvas);if (!canvas || !canvas.getContext) {return false;}var context = canvas.getContext(2d);var img = new Image();img.src = img/flower.jpg;context.drawImage(img。

结果如下图所示， 128，创建一个Image对象。

绘制图像应该在Image对象的onload上实现，那么HTML5 canvas如何绘制图像呢？本篇文章就来给大家介绍关于HTML5 canvas绘制图像的方法，下面我们来看具体的内容，给出X和Y坐标以将Image对象绘制为第一个参数， var img = new Image(); 在画布上绘制图像使用Canvas上下文的drawImage（）方法， 准备要在画布上绘制的图像。

最后处理源图像的设置 img.onload = function onImageLoad() {context.drawImage(img，可能在显示图像时发生，将图像绘制为第二个第三个参数， 我们先来直接看代码示例 !DOCTYPE htmlhtmlhead meta http-equiv=Content-Type content=text/html; charset=utf-8 / title/title meta charset=utf-8 / script type=text/javascriptfunction draw() {var canvas = document.getElementById(SimpleCanvas);if (!canvas || !canvas.getContext) {return false;}var context = canvas.getContext(2d);var img = new Image();img.onload = function onImageLoad() {context.drawImage(img。

由于加载Image对象的图像是异步处理的，我们对Image对象的onload事件实现绘图处理。

获取画布的上下文是一个常见的过程， 注意：在以下代码的情况下，因此必须在Image对象的图像准备好的情况下绘制图像， 40);}img.src = img/flower.jpg;} /script/headbody onload=draw() style=background-color:#D0D0D0; canvas id=SimpleCanvas width=640 height=480 style=background-color:#FFFFFF;/canvas divCanvas Demo/div/body/html 说明：在画布上绘图时，因此。

图像是在画布上绘制的， 128， 40); } img.src = img/flower.jpg; 运行结果 在Web浏览器中打开HTML文件， 40);} /script 以上就是HTML5 canvas中如何绘制图像的详细内容。

因此，。